<template>
  <div class="self_adaption">
    <div class="other">
      <p class="main_text">店铺信息</p>
    </div>
    <div class="g-container">
      <el-form
        :inline="true"
        :model="information"
        label-width="140"
        label-position="right"
      >
        <!-- **************************************************************  店铺信息  ********************************************************************** -->
        <div class="headline">
          <div class="box"></div>
          店铺信息
          <el-icon @click="ShopBtn"><EditPen /></el-icon>
        </div>
        <div class="mes" id="shop_infor">
          店铺展示信息
          <div class="form">
            <el-form-item label="商户名称：" prop="商户名称">
              <el-input
                v-model="information.shopName"
                placeholder="必填"
                clearable
                :disabled="!showShopBtn"
              />
            </el-form-item>
            <!-- <el-form-item label="经营地址：" prop="经营地址">
              <el-input
                v-model="information.detailAddress"
                placeholder="必填"
                clearable
                :disabled="!showShopBtn"
              />
            </el-form-item> -->

            <el-form-item label="经营地址：" prop="经营地址">
              <!-- <el-input
                v-model="information.address"
                placeholder="必填"
                clearable
                :disabled="!showShopBtn"
              /> -->
              <el-cascader
                v-model="information.address"
                :options="pcaTextArr"
                @change="addressChange"
                style="width: 280px"
                :disabled="!showShopBtn"

              />
            </el-form-item>
            <el-form-item label="详细地址：" prop="经营地址">
              <el-input
                v-model="information.detailAddress"
                placeholder="必填"
                clearable
                :disabled="!showShopBtn"
              />
            </el-form-item>
            <el-form-item label="店铺简介：" prop="店铺简介">
              <el-input
                v-model="information.briefIntroduction"
                placeholder="选填"
                clearable
                :disabled="!showShopBtn"
                style="width: 240px"
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <!-- <el-form-item label="商户简介" prop="商户简介">
                    <el-input v-model="information.地址" placeholder="必填" clearable />
                    </el-form-item> -->
            <el-form-item label="商户LOGO：" prop="商户LOGO">
              <div style="position: relative; width: 130px; height: 130px">
                <img class="img_other" :src="mes.shopHead" alt="" />
                <div
                  class="photoBox"
                  style="
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: transparent;
                    border: 0;
                    width: 100%;
                    height: 100%;
                  "
                  v-show="showShopBtn"
                >
                  <el-icon color="transparent"><Plus /></el-icon>
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    :before-upload="beforeAvatarUpload"
                    v-model:file-list="fileList5"
                    :on-remove="handleRemove"
                    :on-change="photoList5"
                  >
                    <el-icon><Plus /></el-icon>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <div class="btn_center" v-show="showShopBtn">
              <button
                type="button"
                @click="addGoodsCancel"
                class="hollow"
                style="margin-right: 20px"
              >
                取消
              </button>
              <button type="button" class="solid" @click="shopEdit('shop')">
                确定
              </button>
            </div>
          </div>
        </div>
        <!-- **************************************************************  基本信息  ********************************************************************** -->
        <div class="headline">
          <div class="box"></div>
          基本信息
          <!-- <el-icon @click="MesBtn"><EditPen /></el-icon> -->
        </div>
        <div class="mes" id="shop_mes">
          负责人信息
          <div class="other_mes">
            <el-form-item label="负责人姓名：" prop="负责人姓名">
              <el-input
                v-model="information.director"
                placeholder="必填"
                clearable
                :readonly="shopmes"
              />
            </el-form-item>
            <el-form-item label="负责人手机号：" prop="负责人手机号">
              <el-input
                v-model="information.directorPhone"
                clearable
                :readonly="shopmes"
              />
            </el-form-item>

          </div>
          结算账户信息
          <div class="other_mes">
            <el-form-item label="开户行：" prop="对公账户">
              <el-input
                v-model="information.companyBankCard.bankName"
                placeholder="必填"
                clearable
                :readonly="shopmes"
              />
            </el-form-item>
            <el-form-item label="对公账户：" prop="对公账户">
              <el-input
                v-model="information.companyBankCard.accountNumber"
                placeholder="必填"
                clearable
                :readonly="shopmes"
              />
            </el-form-item>
            <!-- <el-form-item label="开户银行" prop="开户银行">
                        <el-input
                            v-model="information.directorPhone"
                            placeholder="必填"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="支行名称" prop="支行名称">
                        <el-input
                            v-model="information.directorPhone"
                            placeholder="必填"
                            clearable
                        />
                    </el-form-item> -->
            <el-form-item label="营业执照期限：" prop="营业执照期限">
              <el-input
                v-model="information.licenseDeadline"
                placeholder="必填"
                clearable
                :readonly="shopmes"
              />
            </el-form-item>
          </div>
          <div class="other_btn" v-show="showMesBtn">
            <button
              type="button"
              @click="addGoodsCancel"
              class="hollow"
              style="margin-right: 20px"
            >
              取消
            </button>
            <button type="button" class="solid" @click="shopEdit('Mes')">
              确定
            </button>
          </div>
        </div>
        <!-- **************************************************************  主体信息  ********************************************************************** -->
        <div class="headline">
          <div class="box"></div>
          主体信息
          <!-- <el-icon @click="MainBtn"><EditPen /></el-icon> -->
        </div>
        <div class="mes" id="shop_main">
          企业信息
          <div class="other_mes">
            <el-form-item label="企业名称：" prop="企业名称">
              <el-input
                v-model="information.companyName"
                placeholder="必填"
                clearable
                :readonly="shopMain"
              />
            </el-form-item>
            <el-form-item label="注册地址：" prop="注册地址">
              <el-input
                v-model="information.companyAddress"
                placeholder="必填"
                clearable
                :readonly="shopMain"
              />
            </el-form-item>
            <el-form-item label="统一社会信用代码：" prop="统一社会信用代码">
              <el-input
                v-model="information.creditCode"
                placeholder="必填"
                clearable
                :readonly="shopMain"
              />
            </el-form-item>
            <el-form-item label="营业执照期限：" prop="营业执照期限">
              <el-input
                v-model="information.licenseDeadline"
                placeholder="必填"
                clearable
                :readonly="shopMain"
              />
            </el-form-item>
          </div>
          营业执照
          <div class="other_mes">
            <el-form-item prop="企业名称：">
              <!-- <div class="photoBox other_photo" v-show="showMainBtn">
                            <el-icon><Plus /></el-icon>
                            <el-upload
                                action="#"
                                list-type="picture-card"
                                :auto-upload="false"
                                :before-upload="beforeAvatarUpload"
                                v-model:file-list="fileList"
                                :on-remove="handleRemove"
                                :on-change="photoList"
                            >
                                <el-icon><Plus /></el-icon>
                                <el-dialog>
                                    <img w-full :src="dialogImageUrl1" alt="Preview Image" />
                                </el-dialog>
                            </el-upload>
                        </div> -->
              <img
                class="img_other photoBox other_photo"
                :src="mes.licenses[0]"
                alt=""
              />&emsp;
            </el-form-item>
          </div>
          资质证书照片
          <div class="mes">
            <el-form-item prop="资质证书照片：">
              <div class="certifications">
                <div v-for="(item, index) in mes.certifications" :key="index">
                  <img class="img_other" :src="item" alt="" />&emsp;
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="other_btn" v-show="showMainBtn">
            <button
              type="button"
              @click="addGoodsCancel"
              class="hollow"
              style="margin-right: 20px"
            >
              取消
            </button>
            <button type="button" class="solid" @click="shopEdit('main')">
              确定
            </button>
          </div>
        </div>
        <!-- **************************************************************  法定代表人信息  ********************************************************************** -->
        <div class="headline">
          <div class="box"></div>
          法定代表人信息
          <!-- <el-icon @click="LegalBtn"><EditPen /></el-icon> -->
        </div>
        <div class="mes" id="shop_legal">
          法定人信息
          <div class="other_mes">
            <el-form-item label="法定代表人：" prop="法定代表人">
              <el-input
                v-model="information.corporationName"
                placeholder="必填"
                clearable
                :readonly="shopLegal"
              />
            </el-form-item>
            <el-form-item label="证件类型：" prop="证件类型">
              <el-input value="身份证" clearable :readonly="shopLegal" />
            </el-form-item>
            <el-form-item label="证件号码：" prop="证件号码">
              <el-input
                v-model="information.corporationId"
                placeholder="必填"
                clearable
                :readonly="shopLegal"
              />
            </el-form-item>
          </div>
          法定人证件照
          <div class="other_mes identity" style="width: auto">
            <el-form-item prop="身份证正面：">
              <!-- <div class="photoBox other_photo" v-show="showLegalBtn">
                            <el-icon><Plus /></el-icon>
                            <el-upload
                                action="#"
                                list-type="picture-card"
                                :auto-upload="false"
                                :before-upload="beforeAvatarUpload"
                                v-model:file-list="fileList1"
                                :on-remove="handleRemove"
                                :on-change="photoList1"
                            >
                                <el-icon><Plus /></el-icon>
                                <el-dialog>
                                    <img w-full :src="dialogImageUrl1" alt="Preview Image" />
                                </el-dialog>
                            </el-upload>
                        </div> -->
              <img
                class="img_other photoBox other_photo"
                :src="mes.idCards[0]"
                alt=""
              />&emsp;
            </el-form-item>
            <el-form-item prop="身份证反面：">
              <!-- <div class="photoBox other_photo" v-show="showLegalBtn">
                            <el-icon><Plus /></el-icon>
                            <el-upload
                                action="#"
                                list-type="picture-card"
                                :auto-upload="false"
                                :before-upload="beforeAvatarUpload"
                                v-model:file-list="fileList2"
                                :on-remove="handleRemove"
                                :on-change="photoList2"
                            >
                                <el-icon><Plus /></el-icon>
                                <el-dialog>
                                    <img w-full :src="dialogImageUrl1" alt="Preview Image" />
                                </el-dialog>
                            </el-upload>
                        </div> -->
              <img
                class="img_other photoBox other_photo"
                :src="mes.idCards[1]"
                alt=""
              />
            </el-form-item>
          </div>
          <div class="other_btn" v-show="showLegalBtn">
            <button
              type="button"
              @click="addGoodsCancel"
              class="hollow"
              style="margin-right: 20px"
            >
              取消
            </button>
            <button type="button" class="solid" @click="shopEdit('legal')">
              确定
            </button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { EditPen, InfoFilled, Delete } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile, UploadFile } from "element-plus";
import { ElMessage } from "element-plus";
import { pcaTextArr } from "element-china-area-data";
import {
  RequestShopMes,
  RequestDelShopPhoto,
  RequestEditShop,
} from "../../../api/path/index.js";
import { Plus } from "@element-plus/icons-vue";
onMounted(() => {
  shopMes();
});
// 注册所填写的所有信息
const information = ref<any>({
  companyName: "", //公司名字
  information: "", //店铺简介
  creditCode: "", //社会信用代码
  companyAddress: "", //公司地址
  licenseDeadline: "", //营业期限

  corporationName: "", //法人姓名
  corporationId: "", //法人身份证
  //银行卡号
  companyBankCard: {
    bankName: "",
    accountNumber: "",
  },
  director: "", //负责人姓名
  directorPhone: "", //负责人电话
  shopName: "", //店铺名
  shopAddress: "", //店铺地址
  address: "", //店铺地址
  detailAddress: "", //店铺地址
  type: "", //店铺类型
});
const shopmes = ref(true); //控制店铺信息是否可修改
const shopMain = ref(true); //控制店铺信息是否可修改
const shopLegal = ref(true); //控制店铺信息是否可修改

const showShopBtn = ref(false); //控制店铺信息按钮显示
const showMesBtn = ref(false); //控制基本信息按钮显示
const showMainBtn = ref(false); //控制主体信息按钮显示
const showLegalBtn = ref(false); //控制法定代表人信息按钮显示

const fileList = ref<UploadUserFile[]>([]); //营业执照图片数组
const fileList1 = ref<UploadUserFile[]>([]); //法人身份证正面
const fileList2 = ref<UploadUserFile[]>([]); //法人身份证背面
const fileList4 = ref<UploadUserFile[]>([]); //法人身份证数组
const fileList3 = ref<UploadUserFile[]>([]); //资格证书
const fileList5 = ref<UploadUserFile[]>([]); //公司logo
const fileListAll = ref<UploadUserFile[]>([]); //公司所有图片数组
const mes = ref<any>({
  shopHead: "",
  certifications: [],
  licenses: [],
  idCards: [],
});
// 获取商户信息
const shopMes = async () => {
  // fileList5.value = [{url:'http://www.cyrsum.com/assets/banner-214279da.png'}]
  const a = await RequestShopMes();
  mes.value = a.resultObj;
  console.log("fffffffffffffffffffffffffff", a.resultObj);
  information.value = a.resultObj.shop;

  if (information.value.briefIntroduction == null) {
    information.value.briefIntroduction = "暂无简介";
  }
  for (let i = 0; i < a.resultObj.certifications.length; i++) {
    fileList3.value[i] = {
      url: a.resultObj.certifications[i],
    };
  }
  const information1 = JSON.parse(a.resultObj.shop.companyBankCard.value);
  information.value.companyBankCard = information1;
  const addressList = information.value.shopAddress.split(",");
  console.log("地址地址地址地址地址", addressList);
  information.value.address =addressList.slice(0,3)
  information.value.detailAddress = addressList[3];
 
  console.log(
    "商户信息1111111111111111111111111111111111",
    information.value.companyBankCard
  );
};
const addressChange = (e:any) => {
  console.log('zzzzzzzzzzzzzzzzz',e);
}
const momentMes = ref({
  companyAddress: "",
  shopName: "",
});
//控制店铺信息按钮显示
const ShopBtn = () => {
  showShopBtn.value = true;
  document.getElementById("shop_infor")!.classList.add("show_false");
  momentMes.value = {
    shopName: information.value.shopName,
    companyAddress: information.value.companyAddress,
  };
};
//控制店铺信息按钮显示
const MesBtn = () => {
  showMesBtn.value = true;
  shopmes.value = !shopmes.value;
  document.getElementById("shop_mes")!.classList.add("show_false");
};
//控制店铺信息按钮显示
const MainBtn = () => {
  showMainBtn.value = true;
  shopMain.value = !shopMain.value;
  console.log("营业执照", fileList);

  document.getElementById("shop_main")!.classList.add("show_false");
};
//控制店铺信息按钮显示
const LegalBtn = () => {
  showLegalBtn.value = true;
  shopLegal.value = !shopLegal.value;
  console.log(fileList1.value);
  console.log(fileList2.value);
  console.log(photoList2.value);
  console.log(photoList1.value);

  document.getElementById("shop_legal")!.classList.add("show_false");
};
// 图片删除事件
const handleRemove: UploadProps["onRemove"] = async (
  uploadFile,
  uploadFiles
) => {
  console.log(uploadFile.id);
  if (uploadFile.id) {
    RequestDelShopPhoto(uploadFile.id);
  }
};
// 图片删除事件
const materialRemove = async (file: UploadFile) => {
  console.log("删除1111", file.id);
  const a = await RequestDelShopPhoto(file.id);
  if (a.msg == "操作成功") {
    ElMessage.success("操作成功");
  } else {
    ElMessage.error("操作失败");
  }
};
// 图片上传前执行事件
const beforeAvatarUpload = (rawFile: any) => {
  console.log(rawFile.raw);
  if (!/(png|jpeg)/.test(rawFile.raw.type)) {
    ElMessage.error("请传入正确的图片文件");
    return false;
  } else if (rawFile.raw.size / 1024 / 1024 > 2) {
    ElMessage.error("图片文件大小不能超过2M");
    return false;
  } else {
    return true;
  }
};
//公司logo上传
const photoList5 = async (file: any) => {
  const back = beforeAvatarUpload(file);
  if (back) {
    // 添加到图片数组
    fileList5.value.push(file);
  } else {
    fileList5.value = [];
  }
};
//营业执照上传
const photoList = async (file: any) => {
  const back = beforeAvatarUpload(file);
  if (back) {
    // 添加到图片数组
    fileList.value.push(file);
    const formimgs = new FormData();
    formimgs.append("Licence", file.raw);
  } else {
    fileList.value = [];
  }
};
//法人身份证正面上传
const photoList1 = async (file: any) => {
  const back = beforeAvatarUpload(file);
  if (back) {
    // 添加到图片数组
    fileList1.value.push(file);
    const formimgs = new FormData();
    formimgs.append("idCard", file.raw);
  } else {
    fileList1.value = [];
  }
};
//法人身份证背面上传
const photoList2 = async (file: any) => {
  const back = beforeAvatarUpload(file);
  if (back) {
    // 添加到图片数组
    fileList2.value.push(file);
  } else {
    fileList2.value = [];
  }
};
//资格证书正面上传
const photoList3 = async (file: any) => {
  const back = beforeAvatarUpload(file);
  if (back) {
    // 添加到图片数组
    fileList3.value.push(file);
  } else {
    fileList3.value = [];
  }
};
const upload = ref(false);
// 店铺信息修改确认
const shopEdit = async (value) => {
  const formimgs = new FormData();
  upload.value = false;
  if (value === "shop") {
    console.log("fffffffffffffffffffffffffffffffffffffff", !fileList5.value[0]);
    if (fileList5.value[0]) {
      formimgs.append("headImg", fileList5.value[0].raw);
    }
    upload.value = true;
  } else if (value === "main") {
    if (fileList.value[0]) {
      formimgs.append("licenses", fileList.value[0].raw);
      for (let i = 0; i < fileList3.value.length; i++) {
        formimgs.append("certifications", fileList3.value[i].raw);
      }
      const ax3 = formimgs.getAll("licenses");
      const ax4 = formimgs.getAll("certifications");
      console.log("资质证书", fileList3.value);
      upload.value = true;
    }
  } else {
    formimgs.append("idCards", fileList1.value[0].raw);
    formimgs.append("idCards", fileList2.value[0].raw);
    const ax3 = formimgs.getAll("idCards");
    console.log("身份证", ax3);
    upload.value = true;
  }
  if (upload.value) {
    information.value.companyBankCard = JSON.stringify(
      information.value.companyBankCard
    );
    information.value.shopAddress=information.value.address[0]+','+information.value.address[1]+','+information.value.address[2]+','+information.value.detailAddress
    const blob = new Blob([JSON.stringify(information.value)], {
      type: "application/json;charset=utf-8",
    });
    console.log("表单123", information.value);
    formimgs.append("shop", blob);
    const ax = formimgs.getAll("shop");
    console.log("表单", ax);
    const a = await RequestEditShop(formimgs);
    if (a.msg == "操作成功！") {
      ElMessage.success("操作成功");
      shopMes();
      showLegalBtn.value = false;
      showMainBtn.value = false;
      showMesBtn.value = false;
      showShopBtn.value = false;
      fileList.value = [];
      fileList1.value = [];
      fileList2.value = [];
      fileList3.value = [];
      fileList5.value = [];
    } else {
      ElMessage.error("操作失败！请重试");
    }
  }
};
/**
 * 店铺信息修改取消
 */
const addGoodsCancel = () => {
  fileList5.value = [];
  showShopBtn.value = false;
  information.value.shopName = momentMes.value.shopName;
  information.value.companyAddress = momentMes.value.companyAddress;
};
</script>

<style lang="scss" scoped>
.img_other {
  width: 120px;
  height: 120px;
}
.g-title {
  padding: 20px;
}

/* 隐藏滚动条 */
.g-container::-webkit-scrollbar {
  display: none !important;
}
.g-container {
  background: #fff;
  height: 90%;
  overflow: scroll;
  .headline {
    height: 40px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    font-size: #414141;
    .box {
      width: 3px;
      height: 20px;
      background: #116cf8;
      margin: 0px 10px;
    }
    .el-icon {
      color: #116cf8;
      margin-left: 10px;
    }
  }
  .mes {
    padding: 20px 20px;
    position: relative;
    .form {
      width: 600px;
      margin-top: 30px;
    }
    .other_mes {
      width: 400px;
      margin: 30px 0px 10px 40px;
    }
    .other_photo {
      margin-left: 150px;
    }
    .certifications {
      margin-left: 170px;
    }
    .el-input {
      width: 280px;
    }
    .photoBox {
      width: 120px;
      height: 120px;
      border-radius: 5px;
      border: 1px dashed var(--el-border-color-darker);
      background: #fafafa;
      position: relative;
      overflow: hidden;
      .el-icon {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 50%;
        margin-left: -10px;
        font-size: 20px;
      }
    }
    .btn_center {
      width: 170px;
      margin: 20px auto;
    }
    .identity {
      display: flex;
    }
    .other_btn {
      margin-left: 200px;
    }
  }
  .el-input {
    border: 0px;
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
        inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
      }
    }
  }
  .show_false {
    .el-input {
      border: 1px solid #bfc5cd;
      border-radius: 5px;
      :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px
          var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        .el-input__inner {
          cursor: default !important;
        }
      }
    }
  }
}
:deep(.el-upload-list--picture-card) {
  width: 120px;
  height: 120px;
}
:deep(.el-upload--picture-card) {
  width: 120px;
  height: 120px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 120px;
  height: 120px;
  border: 0;
  margin: 0;
  border-radius: 0;
}
.photoBox :deep(.el-upload--picture-card) {
  opacity: 0;
}
.certifications :deep(.el-upload-list--picture-card) {
  width: 100%;
  height: 100%;
}
.certifications :deep(.el-upload--picture-card) {
  width: 100%;
  height: 100%;
}
.certifications :deep(.el-upload--picture-card) {
  width: 120px;
  height: 120px;
}
</style>
